<template>
  <div>
    <p>库存管理</p>
    <div style="margin:10px 0;">
      <el-row>
        <el-col :span="21">
          <div style="margin-left:20px">
            <el-input
              v-model="searchName"
              style="width: 30%;margin-right:10px"
              placeholder="商品名称/速记码/条码/供应商"
              clearable
            >
              <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>

            <el-button type="primary" size="small" @click="seachbtn()" style="font-size:14px">查 询</el-button>
          </div>
        </el-col>
        <el-col :span="3">
          <el-button
            size="small"
            type="success"
            round
            @click="dialogFormVisible = true;addbtn()"
            style="font-size:14px"
          >入库管理</el-button>
        </el-col>
      </el-row>
    </div>
    <!-- v-loading="loading" -->
    <el-table :data="skuTableData" style="width: 100%">
      <el-table-column prop="businessName" label="商户名称"></el-table-column>
      <el-table-column prop="inventory" label="库存"></el-table-column>
      <el-table-column prop="sellprice" label="售价"></el-table-column>
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button @click="detail(scope.row)" type="text" style="color:#3dc2c2;">
            <span>详情</span>
          </el-button>
        </template>
      </el-table-column>
      <!-- <div slot="empty">
        <img src="../../../assets/blank_tip_page/blank_tip_page.png" alt />
      </div> -->
    </el-table>
    <el-pagination
      :page-size="perPage"
      :current-page="page"
      :total="total"
      @current-change="changePage"
      style="margin-top: 15px;"
      background
      layout="prev, pager, next"
    ></el-pagination>

    <el-dialog
      title="入库管理"
      :visible.sync="dialogFormVisible"
      v-if="dialogFormVisible"
      width="33%"
    >
      <el-form :model="form" class="diaform" ref="form">
        <el-form-item label="商品名称" :label-width="formLabelWidth" prop="productName">
          <el-input v-model="form.productName" autocomplete="off" style="width:51%"></el-input>
        </el-form-item>

        <el-form-item label="库存" :label-width="formLabelWidth" prop="productName">
          <el-input v-model="form.inventory" autocomplete="off" style="width:51%"></el-input>
        </el-form-item>

        <el-form-item label="售价" :label-width="formLabelWidth" prop="productName">
          <el-input v-model="form.sellprice" autocomplete="off" style="width:51%"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false;">取 消</el-button>
        <el-button type="primary" @click="submitForm('form')">添 加</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "stockMge",
  data() {
    return {
      // loading: true,
      skuTableData: [
        { id: 1, businessName: "张志永", inventory: "1", sellprice: "1" },
      ],
      perPage: 10, // 每页显示10条
      page: 1, // 当前页
      total: 0,
      searchName: "",
      dialogFormVisible:false,
      formLabelWidth: "120px",
      form:{
          productName:'',
          inventory:'',
          sellprice:'',
          productImg:''
      }
    };
  },
  mounted() {},
  methods: {
    changePage(num) {
      this.page = num;
    },
    detail(row) {
      console.log(row);
      const id = row.id;
      const name = row.businessName;
    //   this.$router.push({
    //     path: `sku/${row.id}`,
    //     query: {
    //       businessId: id,
    //       businessName: name,
    //     },
    //   });
    },
    seachbtn() {},
    addbtn() {},
    submitForm(form){
        this.dialogFormVisible=false
    }
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-table .cell {
  text-align: center;
}
::v-deep .el-input__inner {
  height: 34px;
  line-height: 34px;
}
::v-deep .el-input__icon {
  line-height: 34px;
}
</style>